<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Resource Search</title>
<!-- <link rel="stylesheet" type="text/css" href="resources/theme/Master.css"/>  -->
<link rel="stylesheet" type="text/css" href="resources/theme/jquery.datepick.css"/>
<link rel="stylesheet" type="text/css" href="resources/theme/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="resources/theme/DT_bootstrap.css"/>
<script type="text/javascript" src="resources/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="resources/js/jquery.plugin.js"></script>
<script type="text/javascript" src="resources/js/jquery.datepick.js"></script>
<script type="text/javascript" src="resources/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="resources/js/DT_bootstrap.js"></script>
<script>
$(function() {
	$('#fromDate').datepick({dateFormat: 'dd/mm/yyyy'});
	$('#toDate').datepick({dateFormat: 'dd/mm/yyyy'});
});
$(document).ready(function() {
    $('#resourceAllocation').dataTable( {
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
    } );
} );
$.extend( $.fn.dataTableExt.oStdClasses, {
    "sWrapper": "dataTables_wrapper form-inline"
} );
$.extend( $.fn.dataTableExt.oStdClasses, {
    "sSortAsc": "header headerSortDown",
    "sSortDesc": "header headerSortUp",
    "sSortable": "header"
} );
</script>
<style>
.error {
	color: #ff0000;
}
.errorblock{
	color: #000;
	background-color: #ffEEEE;
	border: 3px solid #ff0000;
	padding:8px;
	margin:16px;
}
</style>
</head>

<body>
	<form:form method="POST" commandName="SearchResourceCommand">

		<form:errors path="*" cssClass="errorblock" element="div" />
		
		<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered" align="center" width="600">
			<tr>
                <th colspan="2">Resource Search</th>
            </tr>
            <tr>
                <td class="Label" style="width:50%" align="right">Role Name:</td>
                <td style="width:50%">	
                	<form:select path="jobStage" cssClass="Value">
						<form:option value="" label="--- Select ---" />
						<form:options items="${roleNames}" />
					</form:select>
				</td>
            </tr>
            <tr>
                <td class="Label" style="width:50%" align="right">Skill Description:</td>
                <td style="width:50%">	
                	<form:select path="skillName" multiple="yes" cssClass="Value">
						<form:option value="" label="--- Select ---" />
						<form:options items="${skillNames}" />
					</form:select>
				</td>
            </tr>
            <tr>
                <td class="Label" style="width:50%" align="right">From Date:</td>
                <td style="width:50%"><form:input path="fromDate" cssClass="Value"/></td>
            </tr>
            <tr>
                <td class="Label" style="width:50%" align="right">To Date:</td>
                <td style="width:50%"><form:input path="toDate" cssClass="Value"/></td>
            </tr>
            <tr>
                <td class="Label" style="width:50%" align="right">Allocation Status:</td>
                <td style="width:50%">
              		<form:select path="allocationStatus" cssClass="Value">
						<form:option value="" label="--- Select ---" />
						<form:option value="FB" label="Full Billable" />
						<form:option value="PB" label="Partial Billable" />
						<form:option value="NB" label="Non-Billable" />
					</form:select>
              	</td>
            </tr>
			
			<tr>
				<th colspan="2"><input type="submit" value="Search"/></th>
			</tr>
		</table>
		<br/>
		<c:if test="${not empty result.resourceAllocationDetails}">
			<table id="resourceAllocation" cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" align="center">
				<thead>
					<tr>
						<th class="TableHeading" colspan="9" align="center">Resource Allocation</th>
					</tr>
					<tr>
						<th>Signum</th>
						<th>Name</th>
						<th>Job Stage</th>
						<th>Role Name</th>
						<th>Line Manager Signum</th>
						<th>From Date</th>
						<th>To Date</th>
						<th>Allocation(%)</th>
						<th>Billablity</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${result.resourceAllocationDetails}" var="resource"> 
						<tr>
							<td><c:out value="${resource.signum}"/></td>
							<td><c:out value="${resource.firstName}"/>&nbsp;<c:out value="${resource.lastName}"/></td>
							<td><c:out value="${resource.jobStage}"/></td>
							<td><c:out value="${resource.roleName}"/></td>
							<td><c:out value="${resource.lineManagerSignum}"/></td>
							<td><c:out value="${resource.fromDate}"/></td>
							<td><c:out value="${resource.toDate}"/></td>
							<td><c:out value="${resource.totalAllocationPercentage}"/></td>
							<td><c:out value="${resource.billablity}"/></td>
						</tr>
					</c:forEach>
				</tbody>
	    	</table>
    	</c:if>
	</form:form>

</body>
</html>